<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建和注册组件</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <light-bulb></light-bulb>
    <light-bulb></light-bulb>
    <light-bulb></light-bulb>
    <light></light>
    <light2></light2>
</div>


<script>
    Vue.component('light-bulb',{
        template: `
          <div class='light-bulb'>
          <p> Eureka!</p>
          </div>
        `
    });
    Vue.component('light2', {
        functional: true,render (createElement) {
            return createElement(
                'div',
                { class: 'light-bulb' },
                [
                    createElement('p', ' Eureka!')
                ]
            )
        }
    })

    var light = {
        template: `
        <div class=light-bulb>
           <p>Eureka!</p>
        </div>`
    }
    new Vue({
        el: '#app',
        components:{
            'light': light
        }
    })
</script>
</body>
</html>